<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 9.5.12 (464966)"/><meta name="author" content="704206198@qq.com"/><meta name="created" content="2018-01-09 15:06:55 +0000"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2020-03-19 16:54:48 +0000"/><title>DAY29：jQuery入门-选择器/动画</title></head><body><div><div><span style="font-size: 18px;">jQuery开发前的准备</span></div><div style="box-sizing: border-box; padding: 8px; font-size: 12px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">html，css以及JavaScript知识</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">1.jquery-1.XX.X.js   </span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 12px;"><a href="DAY29%EF%BC%9AjQuery%E5%85%A5%E9%97%A8-%E9%80%89%E6%8B%A9%E5%99%A8_%E5%8A%A8%E7%94%BB.resources/jquery-1.11.3.js">jquery-1.11.3.js</a></span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">实例1.建立jquery环境。引用一个外部的jquery库。和引入外部script方法一致。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">jquery的第二种引入方式，CDN引入。</span></div><div><br/></div><div><span style="font-size: 14px; widows: 1; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">&lt;script src=</span><span style="background-color: rgb(251, 250, 248); font-size: 12px; color: rgb(51, 51, 51); font-family: Monaco;">“</span><a href="http://libs.baidu.com/jquery/2.0.0/jquery.js" style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(0, 0, 0); font-family: Monaco;">http://libs.baidu.com/jquery/2.0.0/jquery.js</a><span style="font-size: 14px; widows: 1; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">"&gt;&lt;/script&gt;</span></div><div><br style="color: rgb(51, 51, 51);"/></div></div><div><br/></div><div><br/></div><div><span style="font-size: 18px;">jQuery选择器</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">jQuery最有用的部分：jQuery选择器引擎！jQuery的选择器依赖css1~css3的选择器。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco; font-weight: bold;">1.简单选择器：使用频率：</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 38, 0); font-family: Monaco; font-weight: bold;">*****</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">1）选择器写法：$( ) &gt;&gt;&gt;&gt;&gt; $('div') 字符串</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">根据css样式来进行选取。css叫做添加样式，但是jQuery叫做</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco;">添加行为。</span></div><table style="table-layout: fixed; border-collapse: collapse; min-width: 100%;"><colgroup><col style="width: 190px;"/><col style="width: 190px;"/><col style="width: 190px;"/><col style="width: 190px;"/></colgroup><tbody><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">选择器</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">CSS模式</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">jQuery模式</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">描述</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">标签名</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">div{}</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">$('div')</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 70, 70); font-family: Monaco;">获取</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco; font-weight: bold;">所有</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 70, 70); font-family: Monaco;">div标签的DOM元素</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">ID</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">#box{}</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">$('#box')</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 70, 70); font-family: Monaco;">获取</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco; font-weight: bold;">一个</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 70, 70); font-family: Monaco;">ID为box的DOM对象</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">class(类名)</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">.box{}</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">$('.box')</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 70, 70); font-family: Monaco;">获取</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco; font-weight: bold;">所有</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 70, 70); font-family: Monaco;">class名为box的DOM对象</span></div></td></tr></tbody></table><div style="text-align: center;"><div style="text-align: left;"><div><br/></div></div><div style="text-align: left;"><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">一个小的知识点：</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco;">ID选择器的失明现象。</span></div></div></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    ID在一个页面中只能出现一次，这是一个唯一标识符。在jQuery中就会存在问题。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    选择器选择出的</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco;">对象</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">，有一些属性和方法（length,.size()）</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">jQuery的兼容性</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    </span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">css3的子选择器（不兼容IE6）</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    但是到了jQuery中，jQuery会自行将不兼容IE的问题解决掉。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: Monaco;">    jQueryDOM对象和原生JavaScriptDOM对象之间的属性方法是否通用？不通用！！！！！！！！</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">相互转换：</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    $('DOM')[0].style.color=red;</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    $('DOM').get(0).style.color=red;</span></div><div><br/></div><div><br/></div><div><span style="min-height: 17pt; font-size: 15pt; background-color: rgb(227, 220, 137); color: rgb(149, 163, 171); font-family: consolas;">var obox = document.getElementById("box");</span></div><div><span style="min-height: 17pt; font-size: 15pt; background-color: rgb(227, 220, 137); color: rgb(149, 163, 171); font-family: consolas;">    $(obox)</span></div><div><br/></div><div><br/></div><div><br style="color: rgb(51, 51, 51);"/></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco; font-weight: bold;">进阶选择器：</span></div><table style="table-layout: fixed; border-collapse: collapse; min-width: 100%;"><colgroup><col style="width: 190px;"/><col style="width: 190px;"/><col style="width: 190px;"/><col style="width: 190px;"/></colgroup><tbody><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">选择器</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">CSS模式</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">jQuery模式</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">描述</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">群组选择器</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">div,span,p{}</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">$('div,span,p')</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">略</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">后代选择器</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">ul li a{}</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">$('ul li a')</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">略</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">通配选择器</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">*{}</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">$('*')</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">略</span></div></td></tr></tbody></table><div style="text-align: center;"><div><br style="color: rgb(51, 51, 51);"/></div></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">通配选择器：选择所有；对性能有极大的浪费所以不能在全局范围内使用，最好的方法就是在局部环境下使用；</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">$('ul li a,ul li em,ul li strong')；</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">简化成通配选择器：</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">$('ul li *')</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco; font-weight: bold;">高级选择器：</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">1）层次选择器</span></div><table style="table-layout: fixed; border-collapse: collapse; min-width: 100%;"><colgroup><col style="width: 190px;"/><col style="width: 190px;"/><col style="width: 190px;"/><col style="width: 190px;"/></colgroup><tbody><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">选择器</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">css模式</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">jQuery模式</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">描述</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">后代选择器</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">ul li a{}</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">$('ul li a')</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">获取追溯到的所有元素</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">子选择器</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">div&gt;p{}</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">$('div&gt;p')</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">只获取子类节点</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">next选择器</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">div+p{}</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">$('div+p')</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">只获取某节点后一个同级DOM元素</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">nextAll选择器</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">div~p{}</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">$('div~p')</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">获取某节点后所有同级DOM元素</span></div></td></tr></tbody></table><div><br style="color: rgb(51, 51, 51);"/></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">jQuery为后代选择器提供了一个方法</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco; font-weight: bold;">find()</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">这个find方法里面有一个参数，就是想要找到的后代（可以是标签，类名，ID）</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    $('div p').css('color','red')  ==  $('div').</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco; font-weight: bold;">find('p')</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">.css('color','red') </span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">jQuery为子选择器提供了一个方法，</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco; font-weight: bold;">children()</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">，参数同上；</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    $('div&gt;p').css('color','red')  == $('div').</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco; font-weight: bold;">children('p')</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">.css('color','red');</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">jQuery提供了</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: Monaco; font-weight: bold;">next(）</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">,</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: Monaco; font-weight: bold;">nextAll( )</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">选择器，参数同上：注意next（）选择器，只选择后一个元素。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    $('div+p').css('color','red')  == $('div').</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco; font-weight: bold;">next('p')</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">.css('color','red')</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    $('div~p').css('color','red')  == $('div').</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco; font-weight: bold;">nextAll('p')</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">.css('color','red')</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">注意：children() , next() , nextAll() 这些方法如果不传递参数的话， 那么就默认传递一个通配符*，通常在使用这些选择器的时候，我们需要精准的选择元素，避免发生各种怪异结果。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco; font-weight: bold;">属性选择器：</span></div><table style="table-layout: fixed; border-collapse: collapse; min-width: 100%;"><colgroup><col style="width: 253px;"/><col style="width: 253px;"/><col style="width: 253px;"/></colgroup><tbody><tr><td style="border: 1px solid rgb(211, 211, 211); width: 253px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">CSS模式</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 253px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">jQuery模式</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 253px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">描述</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 253px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">input[name]</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 253px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">$('input[name]')</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 253px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">获取具有这个属性的DOM元素</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 253px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">input[name=XXX]</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 253px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">$('input[name=XXX]')</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 253px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">获取具有属性且属性值为XXX的DOM元素</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 253px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">input[value][name=XXX]</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 253px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">$('input[value][name=XXX]')</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 253px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">获取有</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">value</span> <span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">属性且name为XXX的DOM元素</span></div></td></tr></tbody></table><div><br style="color: rgb(51, 51, 51);"/></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">更多组合等待你来发掘；</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: Monaco; font-weight: bold;">过滤选择器：</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">伪类选择器：</span></div><table style="table-layout: fixed; border-collapse: collapse; min-width: 100%;"><colgroup><col style="width: 190px;"/><col style="width: 190px;"/><col style="width: 190px;"/><col style="width: 190px;"/></colgroup><tbody><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">过滤器名</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">jQuery语法</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">说明</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">返回</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">:first</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">$('li:first')</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">选取第一个元素</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">单个元素</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">:last</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">$('li:last')</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">选取最后一个元素</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">单个元素</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center; margin-left: 40px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">：not(选择器)</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">$('li:not(.red)')</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">选取class不是red的元素</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">一组元素</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">:even</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">$('li:even')</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">选择偶数的所有元素</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">一组元素</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">:odd</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">$('li:odd')</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">选择所有奇数元素</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">一组元素</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">：eq</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">$('li:eq（1）')</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">选择对应下表的元素</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">单个元素</span></div></td></tr></tbody></table><div style="text-align: center;"><div><br style="color: rgb(51, 51, 51);"/></div></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco; font-weight: bold;">内容过滤器</span></div><table style="table-layout: fixed; border-collapse: collapse; min-width: 100%;"><colgroup><col style="width: 190px;"/><col style="width: 190px;"/><col style="width: 190px;"/><col style="width: 190px;"/></colgroup><tbody><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">过滤器名</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;"> </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">jQuery语法</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">说明</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">返回</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">:contains(text)</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">$('li:contains(123456)')</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 70, 70); font-family: Monaco;">选择有123456</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco;">文本</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 70, 70); font-family: Monaco;">的元素</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">一组元素</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">:empty</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">$(li':empty')</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">选取li中不包含子元素或空文本的元素</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">一组元素</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: Monaco;">：has（选择器）</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">$('ul:has(.red)')</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco;">选择</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(70, 70, 70); font-family: Monaco;">子元素含有类red的</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco;">ul</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">一组元素</span></div></td></tr></tbody></table><div><br style="color: rgb(51, 51, 51);"/></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">jQuery为了优化:has选择器性能，提供了一个方法.has()</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    </span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    $('ul:has(.red)')==$('ul').has('.red')</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco; font-weight: bold;">可见性选择器</span></div><table style="table-layout: fixed; border-collapse: collapse; min-width: 100%;"><colgroup><col style="width: 190px;"/><col style="width: 190px;"/><col style="width: 190px;"/><col style="width: 190px;"/></colgroup><tbody><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">过滤器名</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">jQuery语法</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">说明</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">返回</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">:hidden</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">$(li:hidden)</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">选取所有不可见元素</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">集合元素</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">:visible</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">$('li:visible')</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">选取所有可见元素</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">集合元素</span></div></td></tr></tbody></table><div style="text-align: center;"><div><br/></div><div style="text-align: left;"><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">注：是否可见的判定因素为display：block &amp; display :none</span></div></div></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">其他方法：</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">jQuery在选择器和过滤器的基础上提供了一些常用的方法，方便我们开发时灵活使用。</span></div><table style="table-layout: fixed; border-collapse: collapse; min-width: 100%;"><colgroup><col style="width: 190px;"/><col style="width: 190px;"/><col style="width: 190px;"/><col style="width: 190px;"/></colgroup><tbody><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">方法名</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">jQuery语法</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">说明</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">返回</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">is()</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">li.is('.red')</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">传递选择器、DOM、jquery对象</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">true||false</span></div></td></tr><tr><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">hasClass()</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">$('li').hasClass('red')</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">就是is('.'+class)</span></div></td><td style="border: 1px solid rgb(211, 211, 211); width: 190px; padding: 8px;"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(70, 70, 70); font-family: Monaco;">true||false</span></div></td></tr></tbody></table><div style="text-align: center;"><div><br/></div></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">is()方法</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    $('li').is('.red');</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    $('li').hasClass('red')；</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">作业：放大镜，瀑布流等等等，选择器全部改成jquery选择器选择。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    .addClass()</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    .removeClass()</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 38, 0); font-family: Monaco;">.end()终止当前选择器的遍历，回到上个选择条件；</span></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><span style="font-size: 18px;">jQuery动画</span></div><div style="box-sizing: border-box; padding: 8px; font-size: 12px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902);"><div style="text-align: center;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;"><img src="DAY29%EF%BC%9AjQuery%E5%85%A5%E9%97%A8-%E9%80%89%E6%8B%A9%E5%99%A8_%E5%8A%A8%E7%94%BB.resources/52adbea43dfae9b54d000003.GIF" height="380" width="380"/></span><span style="text-align: center; background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;"> </span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    在前一个时代里，网页中几乎所有的特效都由flash实现，但是当JavaScript的兴起，很多特效被替代，因为flash需要用到插件支持，而JavaScript则不需要。注意，这里说的取代并不是完全的，取代flash的有：图片轮播，渐进显示....但是无法被取代的是：MV，视频等.....</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">jQuery的动画其实就是将之前提到过的各种特效进行分装，并对其性能进行优化。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">jQuery动画分为三个部分，非自定义动画，自定义动画，和全局动画设置。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div style="text-align: center;"><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;"><img src="DAY29%EF%BC%9AjQuery%E5%85%A5%E9%97%A8-%E9%80%89%E6%8B%A9%E5%99%A8_%E5%8A%A8%E7%94%BB.resources/37E4AA6F-C1E6-43E7-A433-95515AB30FAB.png" height="449" width="331"/><br/></span></div></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">一、非自定义动画：</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">1.显示、隐藏：</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: Monaco;">    show( ) 、hide( )、toggle()</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">show()、hide()、toggle()方法有两种用法，一种是不传参数，代表直接显示隐藏。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">另一种是向方法中传递一个参数，这个参数为number类型，代表动画的执行时间。会有显示隐藏的动画效果。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    示例:</span><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(255, 122, 116); font-family: Monaco;">show(100)、hide(100)、toggle(100)</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">不仅如此，jQuery还为动画方法提供了三种字符串形式的参数，分别是：fast、slow、和空字符串''</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: Monaco;">    show('fast')、hide('slow')、toggle('')</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">三种参数的执行时间，分别为 ，'fast' ：200毫秒   ''(默认值):400毫秒   'slow'：600毫秒</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px;"><a href="DAY29%EF%BC%9AjQuery%E5%85%A5%E9%97%A8-%E9%80%89%E6%8B%A9%E5%99%A8_%E5%8A%A8%E7%94%BB.resources/%E5%8A%A8%E7%94%BB.html">动画.html</a></span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">2.滑动：</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: Monaco;">    slideUp()</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">：向上滑动（隐藏）</span></font></div><div><br style="color: rgb(51, 51, 51);"/></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: Monaco;">    slideDown()</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">:向下滑动（显示）</span></font></div><div><br style="color: rgb(51, 51, 51);"/></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: Monaco;">    slideToggle()</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">：滑动（自动）</span></font></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">3.淡入淡出：</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: Monaco;">    fadeOut()</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">:淡出（隐藏）</span></font></div><div><br style="color: rgb(51, 51, 51);"/></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: Monaco;">    fadeIn()</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">:淡入（显示）</span></font></div><div><br style="color: rgb(51, 51, 51);"/></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: Monaco;">    fadeToggle()</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">:显示隐藏（）自动</span></font></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">该方法是将元素的透明度从1变成零之后将元素的display属性设置为none;</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    </span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">但是如果我们想要将透明度设置到一个固定值，这些方法并不能实现，jQuery为我们提供了一个方法</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 38, 0); font-family: Monaco;">fadeTo()</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">，该方法接受两个参数。</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    第一个参数是动画执行的时间，第二个参数是期望达到的透明度。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div style="text-align: center;"><div><br style="color: rgb(51, 51, 51);"/></div></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">二、自定义动画</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div style="text-align: center;"><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;"><img src="DAY29%EF%BC%9AjQuery%E5%85%A5%E9%97%A8-%E9%80%89%E6%8B%A9%E5%99%A8_%E5%8A%A8%E7%94%BB.resources/998CADC0-44A4-4880-8140-BC72D4738B5D.png" height="333" width="537"/><br/></span></div></div><div style="text-align: center;"><div><br style="color: rgb(51, 51, 51);"/></div></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: Monaco; font-weight: bold;">animate()</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">方法</span></font></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    animate()方法有三个参数。分别是动画目标(target),动画执行时间，回调函数。只有第一个参数是必填参数。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">animate()方法的使用：</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    1.animate({</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'width':'200px'，</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'height':'200px'</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    })</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">将元素属性变换为自定义动画中的目标属性，所有参数中的属性一起改变。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    2.animate({</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'width':'+=200px'</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    })</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">设置的属性，支持运算。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: Monaco; font-weight: bold;">3.动画的执行顺序：</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">如果想要动画按照顺序执行（执行完第一个动画之后，再执行下一个动画）有三种方法：</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">1）借助动画的回调函数。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">$('input').click(function(){</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    $('div').animate({</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'width':'400px',</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'height':'400px',</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    },function(){</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        $('div').animate({</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">            'width':'200px',</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">            'height':'200px'</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        })</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    })</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">})</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">2）将动画效果分开写。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">$('input').click(function(){</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    $('div').animate({</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'width':'400px',</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'height':'400px',</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    })</span></div><div><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(51, 51, 51); font-family: Monaco;">    $('div').animate({</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'width':'200px',</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'height':'200px'</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    })</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">})</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">3）连缀</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">$('input').click(function(){</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    $('div').animate({</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'width':'400px',</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'height':'400px',</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    }).animate({</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'width':'200px',</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'height':'200px'</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    })</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">})</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">这几种方法在什么情况下使用那？</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">在操作同一元素的时候，推荐使用连缀。在操作不同元素的时候，推荐使用回调函数。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: Monaco;">连缀：jquery的动画方法，每次调用都会返回当前选择的元素，从而可以让jQuery可以实现连缀。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div style="text-align: center;"><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;"><img src="DAY29%EF%BC%9AjQuery%E5%85%A5%E9%97%A8-%E9%80%89%E6%8B%A9%E5%99%A8_%E5%8A%A8%E7%94%BB.resources/7C79E9C5-ED1D-4642-89A0-974F3BAB9015.png" height="559" width="492"/><br/></span></div></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">三、动画的执行顺序。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">当我想要执行一个其他方法的时候，比如给当前元素加一个背景颜色。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">$('input').click(function(){</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    $('div').animate({</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'width':'400px',</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'height':'400px',</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    }).animate({</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'width':'200px',</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'height':'200px'</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    }).css('background','yellow')</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">})</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">问题出现了：当我按照连缀写法，并没有出现我想要的效果所有方法都按照顺序执行，而是将css方法提前执行了。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">问题分析：根据我们以往写运动框架的经验，知道每个动画都是有定时器的，发生这个问题原因就在于此，</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: Monaco;">定时器是异步</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">的，在运行动画的时候我们后面的方法会继续执行，也就出现了上面的问题。</span></font></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">解决：</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">1）可以用回调函数解决：</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">$('input').click(function(){</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    $('div').animate({</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'width':'400px',</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'height':'400px',</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    }).animate({</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'width':'200px',</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'height':'200px'</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    },function(){</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        $(this).css('background','yellow')</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    })</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">})</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">2）jquery给我们提供了一个类似于回调函数的方法queue()：</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">$('input').click(function(){</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    $('div').animate({</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'width':'400px',</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'height':'400px',</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    }).animate({</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'width':'200px',</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'height':'200px'</span></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    }).</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: Monaco;">queue(function(){</span></font></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: Monaco;">          $(this).css('background','yellow')</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: Monaco;">    })</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">})</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">queue()方法的问题:</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">当我想要在这个列队函数中再加一个动画的时候，发现在queue()方法后的函数无法执行。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">$('input').click(function(){</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    $('div').animate({</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'width':'400px',</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'height':'400px',</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    }).animate({</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'width':'200px',</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        'height':'200px'</span></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    }).queue(function(</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: Monaco;">next</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">){</span></font></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">        $(this).css('background','yellow');</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">       </span><span style="font-size: 12px;" /><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: Monaco;">next();</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    }).hide('400')</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">})</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">原理：连缀的原理是因为每个jquery动画方法都会提供一个返回值，这个返回值就是所选择的元素，queue()方法并不会提供一个返回值。为了让连缀继续，我们这时候应该让queue()方法有一个返回值。jquery为queue提供了一个参数next,我们只需要在queue()方法中传入这个参数并调用，那么queue()方法就有了一个返回值，连缀就可以继续了。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><br/></div><div><br/></div><div><span style="font-size: 12px;">案例：下拉菜单</span></div><div><br/></div><div><br/></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">四、动画及相关方法</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">1.stop()方法</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">这个方法是停止动画的方法，他有两个参数，都是布尔值。</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: Monaco;">第一个参数代表是否清除动画队列</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">，</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: Monaco;">第二个参数代表是否直接运行到最后结果</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">。</span></font></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="font-size: 14px;"><a href="DAY29%EF%BC%9AjQuery%E5%85%A5%E9%97%A8-%E9%80%89%E6%8B%A9%E5%99%A8_%E5%8A%A8%E7%94%BB.resources/%E5%8A%A8%E7%94%BB_1.html">动画_1.html</a></span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">2.delay()方法</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">延时执行，该方法有一个参数，是延时执行的毫秒数。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">3.动画的递归</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">$('div').slideToggle(2000,recursion)</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">function recursion(){</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    $(this).slideToggle(2000,recursion)</span></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">}</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">自我调用</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">高级写法：</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">$('div').slideToggle(2000,function(){</span></div><div><font style="font-size: 14px;"><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">    $(this).slideToggle(2000,</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(255, 122, 116); font-family: Monaco;">arguments.callee</span><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">)</span></font></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">})</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">arguments.callee：常用在匿名函数中， 代表当前的函数。</span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(168, 168, 168); font-family: Monaco;">4.动画的全局方法</span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(168, 168, 168); font-family: Monaco;">    $.fx.interval 属性可以调整动画每秒的运行帧数，默认为 13 毫秒。数字越小越流畅，但可能影响程序性能。</span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(168, 168, 168); font-family: Monaco;">    $.fx.interval=1000;动画的帧数设置。</span></span></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px;"><span style="font-size: 14px; background-color: rgb(251, 250, 248); color: rgb(168, 168, 168); font-family: Monaco;">    $.fx.off=true;动画关闭。</span></span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><br/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">手风琴：</span></div><div><span style="font-size: 12px;"><a href="DAY29%EF%BC%9AjQuery%E5%85%A5%E9%97%A8-%E9%80%89%E6%8B%A9%E5%99%A8_%E5%8A%A8%E7%94%BB.resources/%E6%89%8B%E9%A3%8E%E7%90%B42.html">手风琴2.html</a></span></div><div><br/></div><div><br style="color: rgb(51, 51, 51);"/></div><div><span style="background-color: rgb(251, 250, 248); font-size: 14px; color: rgb(51, 51, 51); font-family: Monaco;">简单的出乎意料的终极特效：</span></div><div><span style="font-size: 12px;"><a href="DAY29%EF%BC%9AjQuery%E5%85%A5%E9%97%A8-%E9%80%89%E6%8B%A9%E5%99%A8_%E5%8A%A8%E7%94%BB.resources/%E6%89%8B%E9%A3%8E%E7%90%B4%E6%95%88%E6%9E%9C.zip">手风琴效果.zip</a></span></div><div><br style="color: rgb(51, 51, 51);"/></div><div><br style="font-family: Monaco; font-size: 12px; color: rgb(51, 51, 51);"/></div></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div>.click()</div><div>.mouseenter()</div><div>.mouseleave()</div><div>.siblings()</div><div>.parent()</div><div><br/></div><div><br/></div><div><br/></div></div><div><br/></div></body></html>